import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../../common/style/AppSize.dart';
import '../../../common/style/color.dart';
import 'index.dart';

class PhoneloginPage extends GetView<PhoneloginController> {
  const PhoneloginPage({super.key});

  Widget _buildTextField({
    required TextEditingController controller,
    required String lable,
    String? hint,
    Widget? icon,
    bool obscure = false,
    TextInputType inputType = TextInputType.text,
    List<TextInputFormatter>? formatter,
    Widget? suffix,
  }) {
    return SizedBox(
      height: 48,
      child: TextField(
        controller: controller,
        obscureText: obscure,
        keyboardType: inputType,
        inputFormatters: formatter,
        decoration: InputDecoration(
          labelText: lable,
          hintText: hint,
          icon: icon,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
          contentPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
          suffixIcon: suffix,
        ),
      ),
    );
  }

  Widget _phoneLogin(PhoneloginController controller) {
    return Column(
      children: [
        // 手机号输入
        _buildTextField(
          controller: controller.phoneController,
          inputType: TextInputType.number,
          formatter: [LengthLimitingTextInputFormatter(11)],
          icon: SvgPicture.asset("assets/icon/phone.svg", width: 25, height: 25),
          lable: "手机号登录",
        ),

        const SizedBox(height: 30),

        // 图像验证码
        _buildTextField(
          controller: controller.imageCodeController,
          lable: "图像验证码",
          inputType: TextInputType.text,
          formatter: [LengthLimitingTextInputFormatter(6)],
          icon: SvgPicture.asset("assets/icon/imageCode.svg", width: 25, height: 25),
          suffix: InkWell(
            onTap: controller.refreshImageCode,
            borderRadius: BorderRadius.only(topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
            child: Obx(() {
              if (controller.code.value.isEmpty) {
                return Container(
                  width: 120,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: Colors.grey[300],
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.only(topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
                  ),
                  child: const Text("验证码"),
                );
              }
              return ClipRRect(
                borderRadius: BorderRadius.only(topRight: Radius.circular(10), bottomRight: Radius.circular(10)),
                child: Image.memory(controller.code.value, width: 120, fit: BoxFit.cover),
              );
            }),
          ),
        ),

        const SizedBox(height: 30),

        // 手机验证码输入 + 获取按钮
        _buildTextField(
          controller: controller.phoneCodeController,
          inputType: TextInputType.number,
          formatter: [LengthLimitingTextInputFormatter(6)],
          lable: "手机验证码",
          icon: SvgPicture.asset("assets/icon/phoneCode.svg", width: 25, height: 25),
          suffix: Obx(
            () => TextButton(onPressed: controller.isCounting ? null : controller.sendPhoneCode, child: Text(controller.getPhoneCode.value)),
          ),
        ),

        const SizedBox(height: 30),

        // 登录按钮
        SizedBox(
          width: double.infinity,
          height: 48,
          child: ElevatedButton(
            onPressed: () => controller.phoneLoginSubmit(),
            style: ElevatedButton.styleFrom(
              backgroundColor: MyColors.main_color,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            ),
            child: Text("登录", style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
          ),
        ),
      ],
    );
  }

  // 主视图
  Widget _buildView(PhoneloginController controller) {
    return Column(
      children: [
        SizedBox(height: 50),
        Center(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(100),
            child: Image.asset("assets/logo/logo.png", width: 100, height: 100, fit: BoxFit.cover),
          ),
        ),

        const SizedBox(height: 30),

        Expanded(
          child: Container(
            width: double.infinity,
            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.only(topLeft: Radius.circular(AppSize.indicator))),
            child: Padding(padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 50), child: _phoneLogin(controller)),
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<PhoneloginController>(
      init: PhoneloginController(),
      id: "phoneLogin",
      builder: (controller) {
        return Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            backgroundColor: MyColors.main_color,
            elevation: 0,
            title: Text("手机号登录", style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
            centerTitle: true,
            leading: IconButton(onPressed: Get.back, icon: const Icon(Icons.arrow_back_outlined, size: 30, color: Colors.white)),
          ),
          body: Container(color: MyColors.main_color, child: SafeArea(bottom: false, child: _buildView(controller))),
        );
      },
    );
  }
}
